<template>
    <view :class="ns.b()">
        <!-- 头部用户信息区域 -->
        <view class="header">
            <!-- 用户信息展示及跳转 -->
            <view class="user" @click="onNavigateTo(`/packages/he/index?id=${props.id}`)">
                <!-- 用户头像，包含实名认证标识 -->
                <view class="avatar" :style="{ backgroundImage: `url(${userInfo.avatar})` }">
                    <view class="real">
                        <uni-icons type="fire-filled" size="15" color="#4AB8B0" />
                    </view>
                </view>
                <!-- 用户名称与副信息（IP、粉丝数） -->
                <view class="name">
                    <text>{{ userInfo.name }}</text>
                    <view class="subtitle">
                        <text class="IP">{{ userInfo.ip }}</text>
                        <text> · </text>
                        <text>{{ userInfo.fans }} 人关注了他</text>
                    </view>
                </view>
            </view>
            <!-- 更多操作按钮 -->
            <view class="more">
                <uni-icons type="more-filled" size="18" color="#999" />
            </view>
        </view>

        <!-- 主体内容区域 -->
        <view class="main">
            <view class="content">
                <!-- 动态文本内容 -->
                <view class="text" v-html="content"></view>
                <!-- 图片展示区域，根据图片数量动态布局 -->
                <template v-if="isExistenceImage">
                    <view :class="['theme', `theme-${images.length}`]">
                        <view
                            v-for="(item, index) in images"
                            :key="index"
                            class="theme-item"
                            @click="onPreviewImage(index)"
                        >
                            <i-image
                                class="image"
                                width="100%"
                                :src="item.url"
                                mode="aspectFill"
                                placeholder-text="正在加载图片..."
                                error-text="图片加载失败"
                            />
                        </view>
                    </view>
                </template>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onNavigateTo } from "@/utils";
import { useNamespace } from "@/hooks";

const ns = useNamespace("medical-dynamic");

const emits = defineEmits(["share", "good", "comments", "bad", "image"]);

/**
 * @description 定义组件接收的属性
 * @property {string} id - 动态ID
 * @property {boolean} isConcern - 是否已关注
 * @property {number} concern - 关注数
 * @property {boolean} isLike - 是否点赞
 * @property {number} like - 点赞数
 * @property {number} bad - 踩数
 * @property {number} share - 分享数
 * @property {number} comment - 评论数
 * @property {string} content - 动态内容
 * @property {Array} images - 图片列表
 * @property {Object} user - 用户信息对象
 */
const props = defineProps({
    id: {
        type: [String, Number],
        default: ""
    },
    isConcern: {
        type: Boolean,
        default: false
    },
    concern: {
        type: Number,
        default: 0
    },

    isLike: {
        type: Boolean,
        default: false
    },
    like: {
        type: Number,
        default: 0
    },
    bad: {
        type: Number,
        default: 0
    },
    share: {
        type: Number,
        default: 0
    },
    comment: {
        type: Number,
        default: 0
    },
    content: {
        type: String,
        default: ""
    },
    images: {
        type: Array,
        default: () => []
    },
    user: {
        type: Object,
        required: true
    }
});

const { id, name, avatar, ip, fans } = props.user || {};

/**
 * @description 用户信息响应式数据
 * @property {string} id - 用户ID
 * @property {string} name - 用户名
 * @property {string} avatar - 头像URL
 * @property {string} ip - 用户IP归属地
 * @property {number} fans - 粉丝数量
 */
const userInfo = ref({
    id,
    name,
    avatar,
    ip,
    fans
});

/**
 * @description 检查是否存在图片
 * @returns {boolean} 是否存在图片
 */
const isExistenceImage = computed(() => props.images?.length > 0);

/**
 * @description 预览图片方法
 * @param {number} index - 当前点击图片索引
 * @emits image - 触发图片预览事件，传递索引和图片列表
 */
const onPreviewImage = (index: number) => {
    uni.previewImage({
        current: index,
        urls: props.images?.map((item) => item.url)
    });

    emits("image", {
        index,
        urls: props.images
    });
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
